import { Badge, Divider, FloatingBubble, Popover } from "antd-mobile";
import Taro from "@tarojs/taro";
import { RichText, View } from "@tarojs/components";
import { ReactNode, useMemo, useRef } from "react";
import ClassNames from "classnames";
import styles from "./index.module.scss";

export interface CardProps {
  type?: "notice" | "todo" | "systemMsg" | "chat";
  title: string;
  subtitle?: string;
  content?: string;
  status?: string;
  icon?: ReactNode | null;
  info: any;
  actions?: {
    key: string;
    text: ReactNode;
    onClick(): void;
  }[];
  /** 去详情 */
  onClick: (info: any) => void;
}

/** 卡片 */
function Card(props: CardProps) {
  const {
    type = "notice",
    title,
    icon,
    subtitle,
    content,
    status,
    info,
    actions = [],
    onClick,
  } = props;
  const fatherDom = useRef();

  return (
    <View className={styles["card-container"]} onClick={(e) => onClick(info)}>
      <View className={styles.header}>
        <View className={styles.icon}></View>
        <View className={styles.headline}>
          <View className={styles.title}>{title}</View>
          <View className={styles.subtitle}>{subtitle}</View>
        </View>
        <Popover.Menu
          actions={actions}
          placement="bottom-start"
          stopPropagation={["click"]}
          getContainer={fatherDom.current}
          trigger="click"
        >
          <View
            ref={fatherDom}
            onClick={(e) => e.stopPropagation()}
            className={styles["option-btn"]}
            style={{ display: actions.length > 0 ? "inherit" : "none" }}
          ></View>
        </Popover.Menu>
      </View>
      <Divider
        style={{
          margin: Taro.pxTransform(24),
        }}
      />
      <RichText className={styles["card-content"]} nodes={content}></RichText>
      <View className={styles.footer}>
        <View
          className={ClassNames(styles.status, {
            [styles.read]: status === "1",
            [styles.unread]: status !== "1",
          })}
        >
          {/* {status === "1" ? "已发布" : status === "0" ? "已结束" : "未发布"} */}
          {status === "1" ? "已发布" : "未发布"}
        </View>
        {status === "1" && (
          <>
            <View className={styles["read-count"]}>已读{info.readNum}人<span style={{color: '#999999', margin: '0px 4px'}}>/</span></View>
            <View className={styles["unRead-count"]}>未读{info.unReadNum}人</View>
          </>
        )}
      </View>
    </View>
  );
}

export default Card;
